<template>
  <div>
    <div class="iszj" v-for="(item,i) in newDataalb" :key="i">
      <div class="isl">
        <router-link to="/show">
          <img :src="item.cover" alt @click="getid(item.id)">
        </router-link>
      </div>
      <div class="isr">
        <div class="istm">{{item.name}}</div>
        <div class="isms">{{item.desc}}</div>
        <div class="isgz">
          <span>+ 关注</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dataalb: "",
      isid: ""
    };
  },
  created() {
    this.$store.dispatch("getalbum");
    // this.$store.dispatch('getalbid',this.isid);
  },
  computed: {
    newDataalb() {
      return this.$store.state.isalb;
    }
  },
  mounted() {
    this.dataalb = this.$store.state.isalb;
  },
  methods: {
    /* 获取专辑的Id */
    getid(id) {
      console.log(id);
      return this.$store.commit('getalbid',id)

      // return this.$store.commit("getalbid", id);
    }
  }
};
</script>
<style>
.iszj {
  width: 100%;
  height: 130px;
  display: flex;
  /* border: 1px solid rebeccapurple; */
  margin-bottom: 3px;
}
.isl {
  width: 30%;
  /* border: 1px solid red; */
}
.isl img {
  width: 100%;
}
.isr {
  width: 68%;
  padding-left: 20px;
  text-align: left;
  position: relative;
}
.istm {
  margin-top: 5px;
  font-size: 20px;
  font-weight: 700;
  line-height: 40px;
}
.isms {
  font-size: 18px;
  font-weight: 500;
  line-height: 20px;
  color: rgba(161, 151, 151, 0.904);
  width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.isgz {
  position: absolute;
  right: 15px;
  bottom: 15px;
  border: 1px solid orange;
  padding: 5px 10px;
  color: orange;
}
</style>